<template>
    <div id="home">
        <!-- 头部logo 搜索框等 -->
        <header>
            <a href="/">
                <img src="@/assets/images/logo.png" alt="">
            </a>
            <form class="inp-box">
                <router-link to="/search" tag="input" type="text" @focus=" document.activeElement.blur()"></router-link>
            </form>
        </header>

        <!--轮播图-->
        <div class="swiper-container banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="javascript:void(0);">
                        <img src="./images/banner01.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="javascript:void(0);">
                        <img src="./images/banner02.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="javascript:void(0);">
                        <img src="./images/banner03.jpg" alt="">
                    </a>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>

        <!--10个导航-->
        <nav class="w">
            <div>
                <img src="./images/nav01.jpg" alt="">
                <p>中餐</p>
            </div>
            <div>
                <img src="./images/nav02.jpg" alt="">
                <p>快餐</p>
            </div>
            <div>
                <img src="./images/nav03.jpg" alt="">
                <p>烧烤</p>
            </div>
            <div>
                <img src="./images/nav04.jpg" alt="">
                <p>小吃</p>
            </div>
            <div>
                <img src="./images/nav05.jpg" alt="">
                <p>面食</p>
            </div>
            <div>
                <img src="./images/nav06.jpg" alt="">
                <p>香锅</p>
            </div>
            <div>
                <img src="./images/nav07.jpg" alt="">
                <p>甜品</p>
            </div>
            <div>
                <img src="./images/nav08.jpg" alt="">
                <p>饮品</p>
            </div>
            <div>
                <img src="./images/nav09.jpg" alt="">
                <p>炸鸡</p>
            </div>
            <div>
                <img src="./images/nav10.jpg" alt="">
                <p>更多</p>
            </div>

        </nav>

        <!--加盟头条-->
        <div class="headlines w">
            <a href="javascript:void(0);">新手如何开店？如何选择一个好的项目？</a>
        </div>

        <!--热门专区-->
        <div class="hot w clearfix">
            <ul class="sel-nav" id="">
                <li class="sel-active">热门专区</li>
                <li></li>
                <li></li>
            </ul>

            <ul class="cont-nav">
                <li>
                    <keep-alive>
                        <router-link to="/exhibition" tag="a"><img src="./images/hot01.jpg" alt=""></router-link>
                    </keep-alive>
                </li>
                <li>
                    <keep-alive>
                        <router-link to="/project" tag="a"><img src="./images/hot02.jpg" alt=""></router-link>
                    </keep-alive>
                </li>
                <li>
                    <keep-alive>
                        <router-link to="/thousand" tag="a"><img src="./images/hot03.jpg" alt=""></router-link>
                    </keep-alive>
                </li>
                <li>
                    <keep-alive>
                        <router-link to="/discount" tag="a"><img src="./images/hot04.jpg" alt=""></router-link>
                    </keep-alive>
                </li>
                <li>
                    <keep-alive>
                        <router-link to="personLogin" tag="a"><img src="./images/hot_item_join.jpg" alt=""></router-link>
                    </keep-alive>
                </li>
                <li>
                    <keep-alive>
                        <router-link to="companyLogin" tag="a"><img src="./images/hot_item_add.jpg" alt=""></router-link>
                    </keep-alive>
                </li>
            </ul>
        </div>


        <!--精品推荐-->
        <div class="recommend w clearfix">
            <el-tabs v-model="activeName" @tab-click="">
                <el-tab-pane label="精选推荐" name="first" class="first">
                    <a href="javascript:void(0);" class="cont-item">
                        <div class="ci-img">
                            <img src="./images/recommend01.jpg" alt="">
                        </div>
                        <div class="ci-word">
                            <p class="project-name">粥员外加盟</p>
                            <p class="project-slog">网红炸鸡，万元创业</p>
                            <span class="project-one">加盟扶持</span>
                            <span class="project-one">企业认证</span>
                            <span class="project-two">5-10万</span>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="cont-item">
                        <div class="ci-img">
                            <img src="./images/recommend02.jpg" alt="">
                        </div>
                        <div class="ci-word">
                            <p class="project-name">我呀便当加盟</p>
                            <p class="project-slog">网红炸鸡，万元创业</p>
                            <span class="project-one">加盟扶持</span>
                            <span class="project-one">企业认证</span>
                            <span class="project-two">5-10万</span>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="cont-item">
                        <div class="ci-img">
                            <img src="./images/recommend03.jpg" alt="">
                        </div>
                        <div class="ci-word">
                            <p class="project-name">厉害了炒饭加盟</p>
                            <p class="project-slog">网红炸鸡，万元创业</p>
                            <span class="project-one">加盟扶持</span>
                            <span class="project-one">企业认证</span>
                            <span class="project-two">5-10万</span>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="cont-item">
                        <div class="ci-img">
                            <img src="./images/recommend04.jpg" alt="">
                        </div>
                        <div class="ci-word">
                            <p class="project-name">韩巴巴炸鸡加盟</p>
                            <p class="project-slog">网红炸鸡，万元创业</p>
                            <span class="project-one">加盟扶持</span>
                            <span class="project-one">企业认证</span>
                            <span class="project-two">5-10万</span>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="cont-item">
                        <div class="ci-img">
                            <img src="./images/recommend05.jpg" alt="">
                        </div>
                        <div class="ci-word">
                            <p class="project-name">辣么棒麻辣烫加盟</p>
                            <p class="project-slog">网红炸鸡，万元创业</p>
                            <span class="project-one">加盟扶持</span>
                            <span class="project-one">企业认证</span>
                            <span class="project-two">5-10万</span>
                        </div>
                    </a>
                    <a href="javascript:void(0);" class="cont-item">
                        <div class="ci-img">
                            <img src="./images/recommend06.jpg" alt="">
                        </div>
                        <div class="ci-word">
                            <p class="project-name">湘口福酸菜鱼加盟</p>
                            <p class="project-slog">网红炸鸡，万元创业</p>
                            <span class="project-one">加盟扶持</span>
                            <span class="project-one">企业认证</span>
                            <span class="project-two">5-10万</span>
                        </div>
                    </a>
                </el-tab-pane>
                <el-tab-pane label="当季热搜" name="second" class="second">
                    <a href="javascript:void(0);" class="cont-item">
                        <div class="ci-img">
                            <img src="./images/recommend01.jpg" alt="">
                        </div>
                        <div class="ci-word">
                            <p class="project-name">粥员外加盟</p>
                            <p class="project-slog">网红炸鸡，万元创业</p>
                            <span class="project-one">加盟扶持</span>
                            <span class="project-one">企业认证</span>
                            <span class="project-two">5-10万</span>
                        </div>
                    </a>
                </el-tab-pane>
                <el-tab-pane label="最新入驻" name="third" class="third">最新入驻</el-tab-pane>
            </el-tabs>
            <a href="javascript:void(0);" class="activity-img">
                <img src="./images/hd.jpg" alt="">
            </a>
            <a href="javascript:void(0);" class="more">
                加载更多》
            </a>
        </div>


        <!--行业资讯-->
        <div class="news clearfix">
            <h2>行业资讯</h2>
            <router-link to="/news" tag="a" class="news-more">
                MORE
            </router-link>
            <ul>
                <li class="w">
                    <span>[ 炸鸡 ]</span>
                    <span>学校边上卖饮品 几平营收翻涨快 学校边上卖饮品 几平营收翻涨快 </span>
                    <span class="f_right"><em class="iconfont">&#xe620;</em><i>2141</i>人</span>
                </li>
                <li class="w">
                    <span>[ 炸鸡 ]</span>
                    <span>学校边上卖饮品 几平营收翻涨快 学校边上卖饮品 几平营收翻涨快 </span>
                    <span class="f_right"><em class="iconfont">&#xe620;</em><i>2141</i>人</span>
                </li>
                <li class="w">
                    <span>[ 麻辣香锅 ]</span>
                    <span>学校边上卖饮品 几平营收翻涨快 学校边上卖饮品 几平营收翻涨快 </span>
                    <span class="f_right"><em class="iconfont">&#xe620;</em><i>2141</i>人</span>
                </li>
                <li class="w">
                    <span>[ 酸菜鱼 ]</span>
                    <span>学校边上卖饮品 几平营收翻涨快 学校边上卖饮品 几平营收翻涨快 </span>
                    <span class="f_right"><em class="iconfont">&#xe620;</em><i>2141</i>人</span>
                </li>
            </ul>
        </div>

        <friend-link></friend-link>
        <foot></foot>
    </div>
</template>

<script>

    // swiper
    import Swiper from "swiper"
    // 友情链接
    import friendLink from "@/components/friendLink/friendLink"
    import foot from "@/components/foot/foot"

    export default {
        name: "Home",
        data() {
            return {
                activeName: 'first'
            }
        },
        methods: {
            lbtInit() {
                var mySwiper = new Swiper('.swiper-container', {
                    loop: true, // 循环模式选项
                    autoplay: true,

                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                })
            }
        },
        mounted() {
            this.lbtInit()
        },
        components:{
            friendLink,
            foot,
        }
    }
</script>

<style lang="less">

    /* swiper */
    @import "../../../node_modules/swiper/dist/css/swiper.min.css";

    #home {
        position: relative;
    }

    header {
        background-color: pink;
        position: relative;
        top: 0;
        left: 0;
        z-index: 5;

        a {
            width: 1.055rem;
            height: .335rem;
            position: absolute;
            top: .21rem;
            left: 0.15rem;

            img {
                display: block;
                width: 100%;
            }
        }

        .inp-box {
            width: 100%;
            padding-left: 1.27rem;
            padding-right: .33rem;
            height: .35rem;
            /*background-color: aquamarine;*/
            position: absolute;
            left: 0;
            top: .18rem;

            input {
                padding-right: .33rem;
                width: 100%;
                height: 100%;
                border-radius: 35px;
                background-color: rgba(255, 255, 255, .3);
                padding-left: .45rem;
                outline: none;
                border: none;
            }

            &:after {
                content: "";
                position: absolute;
                top: 0.09rem;
                left: 1.43rem;
                width: 0.185rem;
                height: 0.185rem;
                background: url(./images/search.png) no-repeat center center;
                background-size: contain;

            }
        }

    }

    /* 轮播图 */
    .banner {
        a {
            display: block;
            width: 100%;

            img {
                display: block;
                width: 100%;
            }
        }

        /* 轮播点 */

        .swiper-pagination-bullet {
            width: .09rem !important;
            height: .03rem !important;
            /*background-color: #dce6ec !important;*/
            border-radius: .3rem !important;
            background-color: rgba(255,255,255,1)!important;
        }

        .swiper-pagination-bullet.swiper-pagination-bullet-active {
            background-color: rgba(0, 0, 0, .5) !important;
        }
    }

    nav {
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
        padding-top: .205rem;
        padding-bottom: .13rem;


        div {
            flex: 0 0 18%;
            margin-bottom: .135rem;

            img {
                display: block;
                width: .44rem;
                margin: 0 auto;
            }

            p {
                text-align: center;
            }
        }
    }

    .headlines {
        width: 92%;
        height: 0.3rem;
        background: url("./images/join_news_back.jpg") no-repeat center center;
        background-size: cover;
        position: relative;
        margin: 0 auto 0.2rem auto;


        a {
            color: #856819;
            font-size: 0.12rem;
            line-height: 0.3rem;
            position: absolute;
            left: 1rem;
            top: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    .sel-nav {
        position: relative;
        padding-left: 0.2rem;
        overflow: hidden;
        margin-bottom: 0.07rem;

        li {
            float: left;
            margin-right: 0.17rem;
            color: #666;
            font-size: 12.5px;

            &.sel-active {
                font-family: Alibaba !important;
                font-weight: 700;
                color: #333;
                font-size: 16.5px;
            }
        }

        &::after {
            content: "";
            position: absolute;
            width: 0.025rem !important;
            height: 0.18rem !important;
            background-color: #ff2f2f;
            top: 2px;
            left: 0.08rem;
        }
    }

    .cont-nav {
        clear: both;

        li {
            margin-bottom: 0.1rem;

        }
    }

    .sel-nav {
        overflow: hidden;

        .sel-active {

        }
    }

    .cont-nav {
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;

        li {
            flex: 0 0 49%;
            //background-color: cyan;
            margin-bottom: 0.1rem;

            a {
                display: block;
                width: 100%;
                height: 100%;

                img {
                    display: block;
                    width: 100%;
                }
            }
        }
    }


    .hot {
        position: relative;
        border-bottom: 0.05rem solid #eaeaea;
        margin-bottom: 0.22rem;

        .sel-nav {
            overflow: hidden;

            .sel-active {

            }
        }

        .cont-nav {
            display: flex;
            justify-content: space-between;
            flex-flow: row wrap;

            li {
                flex: 0 0 49%;
                //background-color: cyan;
                margin-bottom: 0.1rem;

                a {
                    display: block;
                    width: 100%;
                    height: 100%;

                    img {
                        display: block;
                        width: 100%;
                    }
                }
            }
        }
    }

    .recommend {
        border-bottom: 0.05rem solid #eaeaea;

        .el-tabs__active-bar {
            background-color: transparent !important;
        }

        .el-tabs__header {
            border-bottom: 1px solid #eaeaea;
        }

        .el-tabs__item {
            padding: 0 !important;
            margin-left: 0 !important;
            margin-right: .17rem !important;
            color: #666;
            font-family: Alibaba !important;
            font-weight: 700;
        }

        .el-tabs__header {
            padding-left: 0.1rem;
            position: relative;

            &:after {
                content: "";
                width: 2.5px;
                height: 18px;
                position: absolute;
                left: 0;
                top: 11px;
                background-color: #ff2f2f;

            }
        }

        .is-active {
            font-size: 18px;
            color: #333;
        }

        .el-tabs__nav-wrap::after {
            height: 0 !important;
        }

        /* 选项 */

        .cont-item {
            padding-top: 0.1rem;
            padding-bottom: 0.1rem;
            border-bottom: 1px solid #eaeaea;
            display: flex;
            justify-content: space-between;

            .ci-img {
                flex: 0 0 1.35rem;
                border-radius: 10px;
                overflow: hidden;

                img {
                    display: block;
                    width: 100%;
                }
            }

            .ci-word {
                flex: 0 0 1.815rem;
                padding-top: .1rem;

                p {
                    &.project-name {
                        font-size: 14px;
                        color: #333;
                        font-weight: 700;
                    }

                    &.project-slog {
                        font-size: 11px;
                        color: #666;
                        margin-top: .05rem;
                        padding-bottom: .1rem;
                    }
                }

                span {
                    display: inline-block;
                    font-size: 11px;

                    &.project-one {
                        margin-right: .095rem;
                        background-color: #fff0e5;
                        border-radius: 5px;
                        color: #ff6c00;
                        padding: .03rem;
                    }

                    &.project-two {
                        margin-left: .1rem;
                        color: #ff2e2e;
                    }
                }
            }
        }

        .activity-img {
            display: block;
            width: 100%;
            padding-top: .15rem;
            padding-bottom: .05rem;

            img {
                border-radius: 10px;
                display: block;
                width: 3.45rem;
            }
        }

        .more {
            display: block;
            width: 100%;
            text-align: center;
            color: #ff4141;
            line-height: .4rem;
            font-weight: 700;
        }

    }

    .news {
        border-bottom: 0.05rem solid #eaeaea;
        position: relative;

        h2 {
            font-size: 18px;
            color: #333;
            padding-left: .25rem;
            position: relative;

            &:after {
                content: "";
                width: 2.5px;
                height: 18px;
                background-color: #ff2f2f;
                position: absolute;
                top: 3px;
                left: .15rem;
            }
        }

        .news-more {
            padding: .035rem .05rem;
            color: #fff;
            font-size: 12px;
            background-image: linear-gradient(-74deg,
            rgba(234, 0, 1, 0.59) 0%,
            rgba(245, 26, 27, 0.59) 50%,
            rgba(255, 54, 54, 0.59) 100%),
            linear-gradient(
                    #f62d37,
                    #f62d37);
            background-blend-mode: normal,
            normal;
            border-radius: 22px;
            position: absolute;
            right: .185rem;
            top: 0;
        }

        ul {
            li {
                border-top: 1px solid #eaeaea;
                padding-top: .15rem;
                padding-bottom: .15rem;
                span {
                    font-size: 15px;
                    display: inline-block;
                    font-weight: normal;
                    vertical-align: middle;
                    margin-right: .07rem;

                    &:nth-of-type(1) {
                        color: #ff2f2f;
                    }

                    &:nth-of-type(2) {
                        width: 1.6rem;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        color: #333;
                    }

                    &:nth-of-type(3) {
                        margin-right: 0;
                        color: #999;
                    }
                }
            }
        }
    }
</style>
